

<script setup name="payRecords">
import { onShow } from '@dcloudio/uni-app'
import { usePayRecordsData } from './hooks/usePayRecordsData'
const { list,active,getpayRecordData ,recordData,loading} = usePayRecordsData()
onShow(() => {
  getpayRecordData(active.value)
})

</script>

<template>
  <view class="payRecords-container">
      <up-subsection @change="index => getpayRecordData(index)" font-size="28rpx" :list="list" mode="subsection" :current="active" />
    <u-list
    >
      <up-loading-icon v-if="loading" text="加载中" textSize="18" />
      <blockquote v-else>
        <view v-if="recordData.length">
          <u-list-item
              v-for=" record in recordData"
              :key="record.id"
          >
            <up-cell
                :label="`${record.typeId === 0  ? '下单时间' : record.typeId === 1 ? '入账时间' : '充值时间'}：${record.updateTime}`"
            >
              <template #title>
                <up-tag
                    :text="record.typeName"
                    size="mini"
                    :type="record.typeId === 0 ? 'error' : record.typeId === 1 ? 'primary' : 'success'"
                />
              </template>
              <template #value>
                <view class="text-content">
                  <up--text class="text-title" lines="1" :text="record?.name" />
                  <up--text v-if="record.typeId === 0" class="text-price" type="error"  :text="`-￥${record.money}`" />
                  <up--text v-else-if="record.typeId === 1" if="record.typeId === 0" class="text-price" type="primary"  :text="`+￥${record.money}`" />
                  <up--text v-else class="text-price" type="success"  :text="`+￥${record.money}`" />
                </view>
              </template>
            </up-cell>
          </u-list-item>
        </view>
        <up-empty v-else text="空空如也~" />
      </blockquote>
    </u-list>
  </view>
</template>

<style scoped lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding: 10rpx 20rpx 20rpx 20rpx;
  height: 100%;
}
:deep(.uni-page-head-btn) {
  display: block !important;
}
.payRecords-container {
  height:100%;
  :deep(.u-subsection) {
    z-index: 9999 !important;
  }
  :deep(.u-list) {
    height: calc(100% - 120rpx) !important;
    overflow: auto;
    padding-top: 30rpx;
    .u-cell__body {
      padding-bottom: 15rpx !important;

    }
    .u-cell__body::first-child{
      padding-top: unset !important;
    }
    .text-content {
      text-align: right;
      .text-title {
        width: 100%;
        margin-bottom: 15rpx !important;
      }
      .text-price {
        width: 100% !important;
        text-align: right !important;
        display: flex;
        text-align: right;
        justify-content: flex-end !important;
        .u-text__value {
          font-weight: bold !important;
          text-align: right;
        }
      }
    }
  }
}
</style>
